<html>
    <head>
        <style>
            body {
              max-width: 600px;
              margin: 50px auto;
              font-family: Arial;
              font-size: 15px;
              line-height: 1.5em;
            }
            .tip {
              font-size: .8em;
            }
        </style>
    </head>
    <body>

<h1>Command Manager Dia Plugin</h1>

<p>Command Manager dia plugin stores graph states and allows you to switch between them.</p>

<h2>Install</h2>

<p>Just add <code>joint.dia.command.js</code> to your HTML:</p>
<pre><code>
&lt;script src="joint.dia.command.js" type="text/javascript" &gt;&lt;/script&gt;
</code></pre>

<h2>Creating a command manager</h2>

<pre><code>
var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({

    el: $('#paper'),
    width: 500,
    height: 500,
    gridSize: 1,
    model: graph
});

<strong>
var commandManager = new joint.dia.CommandManager({
    graph: graph
});
</strong>

$('#undo-button').click(function() { commandManager.undo(); });
$('#redo-button').click(function() { commandManager.redo(); });

</code></pre>


<h2>How does Command Manager work?</h2> 
<p>What command manager actually does is listen to a graph and when any cell's attribute is changed it stores the difference (command). It stores every change made on graph's cells into the one stack (undoStack) and every reverted change into the other (redoStack). It allows you to revert the changes stored in stacks.</p>

<h2>Command Manager API</h2> 

<h3>constructor</h3>

<p>The <code>joint.dia.CommandManager</code> constructor takes up to three parameters.</p> 
<h4>graph</h4>
<p>It is the graph the Command Manager listens to.</p>
<h4>cmdBeforeAdd</h4>
<p>A function evaluated before a command is added. If the function returns <code>false</code>, storing of a command is canceled.
</p>

<pre><code>
var commandManager = new joint.dia.CommandManager({
    graph: graph,
    cmdBeforeAdd: function(cmdName, cell, graph, options) {
        options = options || {};
        return !options.ignoreCommandManager;
    }
});
</code></pre>

<h4>cmdNameRegex</h4>
<p>A regular expression specifying, what cell's attributes the Command Manager listens to. Default regex is <code>/^(?:add|remove|change:\w+)$/</code>.

<h3>undo</h3><p>Function <code>undo()</code> reverts the current graph state to the previous one. It Stores the current state to redoStack.</p>
<h3>redo</h3><p>Function <code>redo()</code> reverts the current graph state to the one reverted by <code>undo()</code>. It Stores the current state to undoStack.</p>
<h3>cancel</h3><p>Function <code>cancel()</code> reverts the current graph state to the previous one. The current state will be forgotten.</p>
<h3>hasUndo</h3><p>Function <code>hasUndo()</code> tells if any state can be undone.</p>
<h3>hasRedo</h3><p>Function <code>redoUndo()</code> tells if any state can be redone.</p>
<h3>reset</h3><p>Function <code>reset()</code> clears all stored states.</p>
<h3>initBatchCommand</h3>
<p>Function <code>initBatchCommand()</code> gives you the abilitity to gather multiple changes into single command.
These commands could be revert with single <code>undo()</code> call.</p>
<p>From the moment the function is called every change made on graph is not stored into undoStack. Changes are temporary kept in the Command Manager until <code>storeBatchCommand()</code> is called.</p>
<h3>storeBatchCommand</h3>
<p>Calling function <code>storeBatchCommand()</code> tells the Command Manager to store all changes temporary kept to the undoStack. In order to store changes you have to call this function as many times as <code>initBatchCommand()</code> had been called.</p>

